<!-- Google scatter charts section start -->
<section id="google-scatter-charts">
    <!-- Scatter Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scatter Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <p class="card-text">Scatter charts plot points on a graph. When the user hovers over the points, tooltips are displayed with more information. google scatter charts are rendered within the browser using SVG or VML depending on browser capabilities.</p>
                        <div id="scatter-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scatter Diff Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scatter Diff Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <p class="card-text">To demonstrate the diff scatter chart, let's consider a pair of experiments, each comparing two medicines. Here are the results from the two experiments, and the resulting diff chart.</p>
                        <div id="scatter-diff"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scatter Material Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scatter Material Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <p class="card-text">Creating a Material Scatter Chart is similar to creating what we'll now call a "Classic" Scatter Chart. You load the google Visualization API (although with the 'scatter' package instead of the 'corechart' package), define your datatable, and then create an object (but of class google.charts.Scatter instead of google.visualization.ScatterChart).</p>
                        <p class="card-text">Material Scatter Charts have many small improvements over Classic Scatter Charts, including variable opacity for legibility of overlapping points, an improved color palette, clearer label formatting, tighter default spacing, softer gridlines and titles (and the addition of subtitles).</p>
                        <div id="scatter-material"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Point Interval Chart -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Point Interval Chart</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <p class="card-text">Point intervals display interval data as small circles. The point size can be controlled with the intervals.pointSize option. Here, it's 10.</p>
                        <div id="point-interval"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Google scatter charts section end -->